<template>
  <div class='big-screen-wrapper'>
    <div class='title-wrapper'>
      <div class='title'>项目盈亏情况模型</div>
      <div class='category'>
        <a-form layout='inline' style='display: flex;justify-content: space-between'>
          <a-form-item>
            <a-input @click='showSelectModel' :title='queryParam.depName' placeholder='单位'
                     v-model='queryParam.depName'></a-input>
          </a-form-item>
          <a-form-item>
            <a-input @click='showSelectModel' :title='queryParam.proName' placeholder='项目'
                     v-model='queryParam.proName'></a-input>
          </a-form-item>
          <a-form-item>
            <a-input @click='showSelectModel' :title='datetoSting' placeholder='时间'
                     v-model='datetoSting'></a-input>
          </a-form-item>
        </a-form>
        <!--        <a-button @click='showSelectModel'>查询</a-button>-->
      </div>

    </div>
    <div class='content-wrapper'>
      <div class='left-wrapper'>
        <div class='left-wrapper-1'>
          <div class='chart-title'>项目概况</div>
          <div class='icon-bg'>
            <div class='desc'>
              {{ leftWrapper1 }}
            </div>
          </div>
        </div>
        <div class='left-wrapper-2'>
          <div class='chart-title'>收入情况占比(金额)</div>
          <chartHalfPie
            v-if='leftWrapper2'
            :sourceChartOption='leftWrapper2'
          ></chartHalfPie>
        </div>
        <div class='left-wrapper-3'>
          <div class='chart-title'>成本及费用情况占比</div>
          <chartPie
            v-if='leftWrapper3'
            :sourceChartOption='leftWrapper3'
          ></chartPie>
        </div>
      </div>
      <div :class="'middle-wrapper'">
        <div class='middle-wrapper-1'>
          <div class='content-wrapper'>
            <div class='row0'>
              <img v-if='parseFloat(middleWrapper1.profitAndLoss) > 0' class=''
                   src='./ying.png' alt=''>
              <img v-else class='' :src="yingORkui(middleWrapper1.profitAndLoss)" alt=''>
            </div>
            <div class='row1'>
              <div class='item item1'>
                {{ middleWrapper1.profitAndLoss }}
              </div>
            </div>
            <div class='row2'>
              <div class='item item2'>
                {{ middleWrapper1.income }}
              </div>
              <div class='item item3'>
                {{ middleWrapper1.costAndFee }}
              </div>

            </div>
            <div class='row3'>
              <div class='item item4' @click='handleItemClick(1)'>
                {{ middleWrapper1.klpfWorkPrice }}
              </div>
              <div class='item item5' @click='handleItemClick(2)'>
                {{ middleWrapper1.advanceWork }}
              </div>
              <div class='item item6' @click='handleItemClick(3)'>
                {{ middleWrapper1.yywy }}
              </div>
              <div class='item item7' @click='handleItemClick(4)'>
                {{ middleWrapper1.costOnBook }}
              </div>
              <div class='item item8' @click='handleItemClick(5)'>
                {{ middleWrapper1.advanceCost }}
              </div>
              <div class='item item9' @click='handleItemClick(6)'>
                {{ middleWrapper1.levelTwoFee }}
              </div>
              <div class='item item10' @click='handleItemClick(7)'>
                {{ middleWrapper1.levelThreeFee }}
              </div>

            </div>
          </div>
        </div>
        <div class='middle-wrapper-2'>
          <div style='display: flex;align-items: center;justify-content: flex-start'>
            <div
              style='width: 170px;height: 40px;
            line-height:40px;
            text-align: center;
            background: rgba(71,255,234,0.24);
            border-top-right-radius: 10px;
            border:1px solid #27fdfd;
            color: #f5aa5e;font-weight: bold'>
              {{middleTitle}}
            </div>
          </div>
          <div style='width: 100%;overflow-x: scroll;overflow-y: hidden'>
            <a-table :loading="loading"
                     :columns='middleWrapper2Cols'
                     :data-source='middleWrapper2Data'
                     :pagination='false'
                     :scroll='{ y: 250,x:1500 }'
                     style='border: 1px solid rgb(39, 253, 253);width: fit-content'
            >
              <template slot="summary" slot-scope="summary">
                <j-ellipsis :value="summary" :length="10"/>
              </template>
              <template slot="dept_name" slot-scope="dept_name">
                <j-ellipsis :value="dept_name" :length="5"/>
              </template>
              <template slot="proj_name" slot-scope="proj_name">
                <j-ellipsis :value="proj_name" :length="6"/>
              </template>
            </a-table>
          </div>
        </div>
      </div>
      <div :class="'right-wrapper'">
        <div class='right-wrapper-1'>
          <div class='chart-title'>同规模项目收入成本分析</div>
          <div class='select-wrapper'>
            <a-row type='flex'>
              <a-col :span='4'>
                <img class='left' src='~@/assets/lwdwyj/left-icon-1.png' alt=''>
                时期
              </a-col>
              <a-col :span='9'>
                <a-date-picker
                  mode='year'
                  placeholder='请选择年份'
                  format='YYYY'
                  value-format='yyyy-MM-dd'
                  v-model='leftQuery.startTime'
                  :open='startYearPickShow'
                  style='width: 100%'
                  @panelChange='handlePanelStartChange'
                  @openChange='handleOpenStartChange'/>
              </a-col>
              <span style='margin: 0 3px'> 至 </span>
              <a-col :span='9'>
                <a-date-picker
                  mode='year'
                  placeholder='请选择年份'
                  format='YYYY'
                  value-format='yyyy-MM-dd'
                  v-model='leftQuery.endTime'
                  :open='endYearPickShow'
                  style='width: 100%'
                  @panelChange='handlePanelEndChange'
                  @openChange='handleOpenEndChange'/>
              </a-col>
            </a-row>
            <a-row type='flex'>
              <a-col :span='4'>
                <img class='left' src='~@/assets/lwdwyj/left-icon-2.png' alt=''>
                单位
              </a-col>
              <a-col :span='20'>
                <a-radio-group v-model='leftQuery.isDept' :options='rightWrapper_selectOption1'/>
              </a-col>
            </a-row>
            <a-row type='flex'>
              <a-col :span='4'>
                <img class='left' src='~@/assets/lwdwyj/left-icon-3.png' alt=''>
                地域
              </a-col>
              <a-col :span='20'>
                <a-radio-group v-model='leftQuery.isRegion' :options='rightWrapper_selectOption2'/>
              </a-col>
            </a-row>
          </div>
          <chartStackBar
            style="borderTop: 1px  #13D4D5 dashed;"
            v-if='rightWrapper1'
            :sourceChartOption='rightWrapper1'
          ></chartStackBar>
        </div>
        <div class='right-wrapper-2'>
          <div class='chart-title'>本地同规模项目盈亏情况</div>
          <a-table :columns='rightWrapper2Cols' :data-source='rightWrapper2Data' :pagination='false'
                   :scroll='{ y: 340 ,x:true}'>
            <template slot="projName" slot-scope="projName">
              <j-ellipsis :value="projName" :length="5"/>
            </template>
            <template slot="situation" slot-scope="situation">
              <j-ellipsis :value="situation" :length="8"/>
            </template>
          </a-table>
        </div>
      </div>
    </div>
    <select-model ref='selectModel' @getSelectData='getSelectData'></select-model>
  </div>
</template>

<script>
  import {chartPie, chartLine, chartStackLine, chartStackBar, chartHalfPie} from '@/components/BaseCharts/index'
  import selectModel from '../selectModel'
  import {axios} from '@/utils/request'
  import * as lodash from 'lodash'
  import moment from 'moment'
  import kui from './kui.png'
  import ying from './ying.png'

  export default {
    name: 'index',
    components: {chartPie, chartLine, chartStackLine, chartStackBar, chartHalfPie, selectModel},
    data() {
      return {
        middleTitle: '收入明细表',
        ying: ying,
        kui: kui,
        datetoSting: '',
        loading: false,
        leftWrapper1: '',
        leftWrapper2: {
          chartType: 'chartPie',
          refID: `chartPie1`,
          text: '',
          subText: '',
          series: [
            {data: [], name: ''}
          ]
        },
        leftWrapper3: {
          chartType: 'chartPie',
          refID: `chartPie1`,
          text: '',
          subText: '',
          series: [
            {data: [], name: ''}
          ]
        },
        middleWrapper1: {
          addTime: '',
          advanceCost: '',
          advanceWork: '',
          businessId: '',
          costAndFee: '',
          costOnBook: '',
          income: '',
          klpfWorkPrice: '',
          levelThreeFee: '',
          levelTwoFee: '',
          profitAndLoss: '',
          yywy: ''
        },
        rightWrapper1Cols: [
          {
            title: '决策信息名称',
            dataIndex: ''
          },
          {
            title: '决策信息',
            dataIndex: ''
          }
        ],
        count: 0,
        payload: {},
        leftQuery: {
          businessId: '',
          isDept: '1',
          isRegion: '1',
          startTime: '',
          endTime: ''
        },
        startYearPickShow: false,
        endYearPickShow: false,
        rightWrapper_selectOption1: [
          {label: '中国中铁', value: '1'},
          {label: '本单位', value: '2'},
          {label: '其他单位', value: '3'}
        ],
        rightWrapper_selectOption2: [
          {label: '全国', value: '1'},
          {label: '本地', value: '2'},
          {label: '其它地域', value: '3'}
        ],
        rightWrapper1: {
          chartType: 'chartBar',
          refID: `rightWrapper1`,
          text: '',
          subText: '',
          bottom: '22%',
          xAxis: [],
          series: [
            {name: '', data: [], notStack: true},
            {name: '', data: [], notStack: true}
          ]
        },
        rightWrapper2Cols: [
          {
            title: '项目名称',
            dataIndex: 'projName',
            width: 115,
            scopedSlots: {customRender: 'projName'},

          },
          {
            title: '合同金额(万元)',
            dataIndex: 'hwfp',
            width: 140
          },
          {
            title: '盈亏情况',
            dataIndex: 'situation',
            width: 115,
            scopedSlots: {customRender: 'situation'},
          },
          {
            title: '比例',
            dataIndex: 'proportion',
            width: 90
          }
        ],
        rightWrapper2Data: [],
        middleWrapper2_1_3Cols: [
          {
            title: '序号',
            dataIndex: 'id',
            width: 60
          },
          {
            title: '单位',
            dataIndex: 'dept_name',
            width: 150,
            scopedSlots: {customRender: 'dept_name'},
          },
          {
            title: '项目',
            dataIndex: 'proj_name',
            width: 150,
            scopedSlots: {customRender: 'proj_name'},
          },
          {
            title: '合同额或分劈额',
            dataIndex: 'hwfp_price',
          },
          {
            title: '完成产值',
            dataIndex: 'comp_prod',
          },
          {
            title: '开累批复验工计价',
            dataIndex: 'klpf_work_price',
          },
          {
            title: '超前验工',
            dataIndex: 'advance_work',
          },
          {
            title: '应验未验',
            dataIndex: '',
            children: [
              {
                title: '合同内已完工',
                dataIndex: 'yywy_htnywg'
              },
              {
                title: '合同外已批复',
                dataIndex: 'yywy_htwypf'
              },
              {
                title: '明确予以调整的价差',
                dataIndex: 'yywy_mqyytzjc'
              }
            ]
          }
        ],
        middleWrapper2_4_7Cols: [
          {
            title: '序号',
            dataIndex: 'index',
            width: 60
          },
          {
            title: '科目编号',
            dataIndex: 'subjectCode',
            width: 140
          },
          {
            title: '科目名称',
            dataIndex: 'subjectName'
          },
          {
            title: '凭证日期',
            dataIndex: 'docDate'
          },
          {
            title: '凭证字号',
            dataIndex: 'docNumber'
          },
          {
            title: '摘要',
            dataIndex: 'summary',
            width: 200,
            scopedSlots: {customRender: 'summary'},
          },
          {
            title: '借方',
            dataIndex: 'debitCurrency'
          },
          {
            title: '贷方',
            dataIndex: 'crediCurrency'
          },
          {
            title: '方向',
            dataIndex: 'balanceDirection'
          },
          {
            title: '期末余额',
            dataIndex: 'closeMoney'
          }
        ],
        middleWrapper2Cols: [
          {
            title: '序号',
            dataIndex: 'id',
            width: 60
          },
          {
            title: '单位',
            dataIndex: 'dept_name',
          },
          {
            title: '项目',
            dataIndex: 'proj_name',
          },
          {
            title: '合同价或劈价',
            dataIndex: 'hwfp_price',
          },
          {
            title: '完成产值',
            dataIndex: 'comp_prod',
          },
          {
            title: '开累批复验工计价',
            dataIndex: 'klpf_work_Price',
          },
          {
            title: '超前验工',
            dataIndex: 'advance_work',
          },
          {
            title: '应验未验',
            dataIndex: '',
            children: [
              {
                title: '合同内已完工',
                dataIndex: 'yywy_htnywg',

              },
              {
                title: '合同外已批复',
                dataIndex: 'yywy_htwypf',

              },
              {
                title: '明确予以调整的价差',
                dataIndex: 'yywy_mqyytzjc',

              }
            ]
          }
        ],
        middleWrapper2Data: [],
        queryParam: {proId: '', depId: '', date: []}
      }
    },
    watch: {
      leftQuery: {
        handler() {
          this.fetchRight1()
        },
        deep: true
      }
    },
    created() {
    },
    mounted() {
      this.showSelectModel()
    },
    methods: {
      yingORkui(val) {
        return val.indexOf('-') ? this.ying : this.kui
      },
      getSelectData(data) {
        this.queryParam = data
        this.datetoSting = this.queryParam.date.toString()
        if (Array.isArray(this.queryParam.date) && this.queryParam.date.length === 2) {
          this.payload = {
            businessId: this.queryParam.proId,
            proName: this.queryParam.proName,
            depName: this.queryParam.depName,
            depId: this.queryParam.depId,
            startTime: this.queryParam.date[0],
            endTime: this.queryParam.date[1],
          }
          this.handleProjectChange(this.payload)
        }
      },
      showSelectModel() {
        if (Object.keys(this.payload).length > 0) {
          let data = lodash.cloneDeep(this.payload)
          data.date = [data.startTime, data.endTime]
          data.proId = data.businessId
          this.$refs.selectModel.edit(data)
        } else {
          this.$refs.selectModel.edit(null)
        }
      },
      deepCopy(data) {
        return JSON.parse(JSON.stringify(data))
      },
      handleProjectChange(payload) {
        this.fetchLeft1(payload)
        this.fetchLeft2(payload)
        this.fetchLeft3(payload)
        this.fetchRight1(payload)
        this.fetchRight2(payload)
        this.fetchMiddle1(payload)
        // this.fetchMiddle2(payload)
      },

      async fetchLeft1(payload) {
        debugger
        const cpayload = lodash.cloneDeep(payload)
        cpayload.viewType = 'reList'
        cpayload.viewTableName = 'view_model_profit_overview'
        delete cpayload.startTime
        delete cpayload.endTime
        const ret = await axios.get('/common/sjScreenCommon/sjGetScreenDataByType', {params: cpayload})
        let {result} = ret
        this.leftWrapper1 = result[0].projOverview
      },

      async fetchLeft2(payload) {
        const cpayload = lodash.cloneDeep(payload)
        cpayload.viewType = 'pie'
        cpayload.viewTableName = 'view_model_profit_incomepie'

        const ret = await axios.get('/common/sjScreenCommon/sjGetScreenDataByType', {params: cpayload})
        let {result} = ret
        const dataShadow = lodash.cloneDeep(this.leftWrapper2)
        dataShadow.series = result.reduce((acc, cur) => {
          acc.push({data: [cur.data], name: cur.name})
          return acc
        }, [])
        this.leftWrapper2 = null
        setTimeout(() => {
          this.leftWrapper2 = dataShadow
        }, 100)
      },

      async fetchLeft3(payload) {
        const cpayload = lodash.cloneDeep(payload)
        cpayload.viewType = 'pie'
        cpayload.viewTableName = 'view_model_profit_costpie'

        const ret = await axios.get('/common/sjScreenCommon/sjGetScreenDataByType', {params: cpayload})
        let {result} = ret
        const dataShadow = lodash.cloneDeep(this.leftWrapper3)
        dataShadow.series = result.reduce((acc, cur) => {
          acc.push({data: [cur.data], name: cur.name})
          return acc
        }, [])
        this.leftWrapper3 = null
        setTimeout(() => {
          this.leftWrapper3 = dataShadow
        }, 100)
      },
      async fetchMiddle1(payload) {
        const cpayload = lodash.cloneDeep(payload)
        cpayload.viewType = 'reList'
        cpayload.viewTableName = 'view_model_profit_lossmodel'
        const ret = await axios.get('/common/sjScreenCommon/sjGetScreenDataByType', {params: cpayload})
        let {result} = ret
        if (Array.isArray(result) && result.length > 0) {
          this.middleWrapper1 = result[0]
        }
      },
      async fetchMiddle2(payload) {
        const ret = await axios.get('/datamodel/modelProfitLoss/levelProjectAnalysis', {params: payload})
        let {result} = ret
        result.forEach((item, index) => item.index = index + 1)
        this.loading = false
        this.middleWrapper2Data = result
      },
      async fetchRight1(payload) {
        if (payload) {
          this.leftQuery.businessId = payload.businessId
        }
        const ret = await axios.get('/datamodel/modelProfitLoss/queryBarData', {params: this.leftQuery})
        let {result} = ret
        const dataShadow = lodash.cloneDeep(this.rightWrapper1)
        let series = []
        if (Array.isArray(result)) {
          series = result.reduce((acc, cur) => {
            acc.push({
              name: cur.name,
              data: cur.data,
              notStack: true
            })
            return acc
          }, [])
        }
        dataShadow.xAxis = ['开累验工', '超期验工', '应验未验', '成本费用', '预列成本', '管理费用']
        dataShadow.series = series
        this.rightWrapper1 = null
        setTimeout(() => {
          this.rightWrapper1 = dataShadow
        }, 100)
      },
      async fetchRight2(payload) {
        const ret = await axios.get('/datamodel/modelProfitLoss/relatedProjectList', {params: payload})
        let {result} = ret
        this.rightWrapper2Data = result
      },
      handlePanelStartChange(value) {
        this.startYearPickShow = false
        this.leftQuery.startTime = moment(value).format('YYYY')
      },
      // 弹出日历和关闭日历的回调
      handleOpenStartChange(status) {
        this.startYearPickShow = status
      },
      handlePanelEndChange(value) {
        this.endYearPickShow = false
        this.leftQuery.endTime = moment(value).format('YYYY')
      },
      // 弹出日历和关闭日历的回调
      handleOpenEndChange(status) {
        this.endYearPickShow = status
      },
      moment,
      handleItemClick(itemIndex) {
        this.loading = true
        this.middleWrapper2Data = []
        if (itemIndex >= 1 && itemIndex <= 3) {
          this.middleTitle = '收入明细（单位：万元）'
          this.middleWrapper2Cols = this.middleWrapper2_1_3Cols
        } else {
          this.middleWrapper2Cols = this.middleWrapper2_4_7Cols
          this.middleTitle = '成本费用明细（单位：万元）'
        }
        const payload = {
          businessId: this.queryParam.proId,
          clickFlag: itemIndex
        }
        this.fetchMiddle2(payload)
      }

    }
  }
</script>

<style scoped lang='less'>
  ::v-deep {
    .is-black {
      box-shadow: rgba(255, 51, 32, 0.97) 0 0 18px inset;
    }

    .ant-table-pagination.ant-pagination {
      margin: 15px 15px 0 0;
    }

    .ant-pagination-item {
      background-color: transparent;
      border: 1px solid transparent;
    }

    .ant-pagination-item-link {
      background: transparent;
      border-color: transparent;
    }

    .ant-pagination-item-active {
      color: #13D4D5;
      background: transparent;
      border: 1px solid #13D4D5;
    }

    .ant-pagination li a {
      color: white !important;
    }

    .ant-pagination {
      color: white;
    }

    .ant-table-body {
      background-color: transparent !important;
    }

    .ant-table-row td {
      padding-top: 11px;
      padding-bottom: 11px;
    }

    .ant-table-header {
      background-color: transparent !important;
      margin-bottom: 0 !important;
      overflow-x: hidden !important;
    }

    .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) > td {
      background: rgba(255, 255, 255, 0.7);
      color: black !important;
    }
  }

  .ant-table-wrapper {
    width: 100%;
    background: transparent;

    ::v-deep {
      .ant-table-row {
        color: white;
      }

      .ant-table-placeholder {
        background: transparent;
        border: none;

        * {
          color: white;
        }
      }

      .ant-spin-nested-loading {
        width: 100%;

        th, td {
          border-bottom: none;
        }

        .ant-table-thead {
          background-color: rgba(8, 245, 217, 0.3);
          height: 30px;
          line-height: 0.3;
          color: white;

          * {
            background: transparent;
            color: white;
          }
        }
      }
    }

  }

  .chart-title {
    color: #1cf8ff;
    background-clip: text;
    -webkit-background-clip: text;
    margin-top: 0.2vw;
    margin-left: 0.2vw;
    font-size: 0.8vw;
    font-weight: bold;
    left: 0;
    top: 0;
  }

  .big-screen-wrapper {
    min-width: 1900px;
    min-height: 937px;
    width: 100%;
    height: calc(100%);
    background: url(~@/assets/hgxjc/lwdwyj/bg.png) no-repeat;
    background-size: cover;
    position: relative;
    display: flex;
    align-content: flex-start;
    justify-content: center;
    flex-direction: column;

    .title-wrapper {
      background: url(~@/assets/hgxjc/lwdwyj/title1.png) no-repeat;
      background-size: contain;
      position: relative;
      width: 100%;
      height: 110px;
      display: flex;
      align-content: center;
      justify-content: flex-start;
      flex-direction: column;
      padding-top: 1vw;
      flex-shrink: 0;

      & > * {
        text-align: center;
        font-size: 1vw;
        color: #1cf8ff;
        background-clip: text;
        -webkit-background-clip: text;
        font-weight: bold;
      }

      & > .title {
        font-size: 1.3vw;
      }


      & > .category {
        margin-top: 0.1vw;
        width: 700px;
        margin: 0 auto;

        /deep/ * {
          background: transparent !important;
        }

        /deep/ .ant-input {
          border: 1px solid #13D4D5;
          color: #13D4D5;
        }
      }
    }

    .content-wrapper {
      overflow: hidden;
      flex-grow: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      position: relative;

      color: white;
      font-size: 0.3vw;

      & > div {
        color: #1cf8ff;
        background-clip: text !important;
        -webkit-background-clip: text !important;
        font-weight: bold;
      }

      .item {
        cursor: pointer;
      }

      .row0 {
        position: absolute;
        width: 100%;
        z-index: 1;
        top: 60px;
        height: 30px;
        left: -5px;

        & > img {
          width: 35px;
          height: 35px;
        }
      }

      .row1 {
        position: absolute;
        width: 100%;
        z-index: 1;
        top: 24%;
        height: 30px;
        text-indent: -10px;
      }

      .row2 {
        position: absolute;
        width: 100%;
        z-index: 1;
        top: 42.5%;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;

        & > div {
          flex: 1;
          flex-shrink: 0;
          overflow: hidden;

          &:first-child {
            text-align: center;
            text-indent: -97px;
          }

          &:last-child {
            text-indent: -15px;
          }
        }
      }

      .row3 {
        display: flex;
        align-items: center;
        justify-content: center;

        & > div {
          flex: 1;
          overflow: hidden;
          text-align: center;

          &:nth-child(1) {
            text-indent: -0px;
          }

          &:nth-child(2) {
            text-indent: -10px;
          }

          &:nth-child(3) {
            text-indent: -25px;
          }

          &:nth-child(4) {
            flex: 1.5;
            text-indent: 90px;
          }

          &:nth-child(5) {
            text-indent: 20px;
          }

          &:nth-child(6) {
            text-indent: 0;
          }

          &:nth-child(7) {
            text-indent: -10px;
          }
        }
      }

      .row3 {
        position: absolute;
        width: 100%;
        z-index: 1;
        top: 87%;
        height: 30px;
        background: teal;
      }

      & > div {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        &.middle-wrapper1 {
          flex: 1.5;

          background: url(~@/assets/hgxjc/lwdwyj/middle.png) no-repeat;
          background-size: contain;
          background-position: center center;
          position: relative;
        }

        &.right-wrapper1 {
          background: url(~@/assets/hgxjc/lwdwyj/right.png) no-repeat;
          background-size: contain;
          position: relative;
          background-position: center center;
        }

        &.middle-wrapper2 {
          flex: 1.5;
          background: url(~@/assets/hgxjc/lwdwyj/middle2.png) no-repeat;
          background-size: contain;
          background-position: center center;
          position: relative;
        }

        &.right-wrapper2 {
          background: url(~@/assets/hgxjc/lwdwyj/right2.png) no-repeat;
          background-size: contain;
          position: relative;
          background-position: center center;
        }

        &.left-wrapper {
          flex: 1;
          display: flex;
          align-items: flex-start;
          justify-content: flex-start;
          flex-direction: column;
          padding: 5px 10px;
          height: 100%;
          flex-shrink: 0;

          & > div {
            margin: 4px 0;
            background-color: rgba(0, 255, 217, 0.05);
          }

          .chart-title {
            color: #1cf8ff;
            background-clip: text;
            -webkit-background-clip: text;
            margin-top: 0.2vw;
            margin-left: 0.2vw;
            font-size: 0.8vw;
            font-weight: bold;
            position: relative;
            left: 0;
            top: 0;
          }

          & > div {
            width: 100%;
            height: 100%;
            flex: 1;
            flex-shrink: 0;
            position: relative;

          }

          .left-wrapper-1 {
            position: relative;
            padding: 0 10px;

            .desc {
              position: relative;
              font-size: 14px;
              height: 78%;
              overflow-y: auto;
              color: white;
              margin: 10px 15px;
              top: 20px;
            }

            .icon-bg {
              background: url(~@/assets/hgxjc/xmykmx/left.png) no-repeat;
              background-size: 100% 100%;
              position: absolute;
              width: 100%;
              height: 100%;
              position: absolute;
              right: 0;
              bottom: 0;
            }
          }

          .left-wrapper-2 {
            padding: 10px;
          }
          .left-wrapper-3 {
            padding: 10px;
          }
        }

        &.right-wrapper {
          flex: 1;
          display: flex;
          align-items: flex-start;
          justify-content: flex-start;
          flex-direction: column;
          height: 100%;
          padding: 5px 10px;
          overflow-y: hidden;

          & > div {
            margin: 4px 0;
            background-color: rgba(0, 255, 217, 0.05);
          }

          & > div {
            flex-shrink: 0;
            flex: 1;
            width: 100%;
            height: 33%;
            overflow-y: scroll;
          }

          .right-wrapper-1 {
            overflow: hidden;
            padding: 10px;

            .select-wrapper {
              margin-top: 8px;
              height: 140px;
              width: 100%;
              color: white;
              display: flex;
              align-items: flex-start;
              justify-content: flex-start;
              flex-direction: column;

              & > .ant-row-flex {
                margin: 10px;
                width: 100%;

                ::v-deep {
                  .ant-calendar-picker-icon {
                    color: #13D4D5 !important;
                  }

                  .ant-calendar-picker-input {
                    background-color: transparent !important;
                    border-color: #02B5B9;
                    padding: 0 10px;
                    height: 22px;
                    color: #13D4D5 !important;

                    input {
                      color: white;
                    }
                  }
                }

                .ant-radio-group {
                  width: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: flex-start;
                  overflow: hidden;

                  ::v-deep {
                    & > label {
                      flex-grow: 1;
                      flex-basis: 0;
                    }

                    .ant-radio-inner {
                      border-color: #02B5B9;
                    }
                  }

                  ::v-deep span {
                    color: white;
                    background-color: transparent;
                  }
                }
              }
            }

            .echarts {
              height: 225px;
              overflow: hidden;
              flex-grow: 1;
            }
          }

          .right-wrapper-2 {
            padding: 10px;
            overflow: hidden;
          }
        }

        &.middle-wrapper {
          flex: 2;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          flex-direction: column;
          overflow: hidden;

          & > div {
            width: 100%;
          }

          .middle-wrapper-1 {
            flex: 1.5;
            overflow: hidden;
            background: url(~@/assets/htqdzhmx/middleBorder.png) no-repeat;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            width: 100%;
            padding: 0 20px;

            .content-wrapper {

              background: url(~@/assets/hgxjc/xmykmx/middle1.png) no-repeat;
              background-size: 97% 88%;
              background-position: center;
              //.bg{
              //  background: url(~@/assets/hgxjc/xmykmx/left.png) no-repeat;
              //  background-size: 100% 100%;
              //}

              .item {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;

                span:nth-child(2) {
                  color: #ed9909;
                }
              }

            }
          }

          .middle-wrapper-2 {
            flex: 1;

            ::v-deep {
              .ant-table-body {
                overflow-x: hidden !important;
              }
            }

            & > div {
              width: 100%;
            }
          }
        }
      }
    }
  }
</style>